<template>
	<view class="kui-grid kui-box-border kui-flex" :style="rootStyle">
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		defineComponent,
		SetupContext,
		provide,
		computed,
		CSSProperties,
		toRefs,
		onMounted,
		nextTick
	} from 'vue';
	
	import GridProps from './props';
	
	const name = 'kui-grid';
	
	export default defineComponent({
		name,
		props: GridProps,
		setup(props, context: SetupContext) {
			const state = reactive({
				iconSize: props.iconSize,
				iconColor: props.iconColor,
				reverse: props.reverse,
				direction: props.direction,
				border: props.border,
				childrens: [],
				marginLeft: `${props.gutter / 2}rpx`,
				clickable: props.clickable
			});
			
			const rootStyle = computed(() => {
				const style: CSSProperties = reactive({});
				const percent = `${100 / props.columns}%`;
				style.gridTemplateColumns = `repeat(${props.columns}, ${percent})`;
				// style.columnGap = `${props.gutter}rpx`;
				style.marginLeft = state.marginLeft;
				return style;
			});
			
			onMounted(() => {
				nextTick(() => {
					if (state.childrens) {
						console.log(state.childrens);
						state.childrens.forEach((vm: any, idx: number) => {
							if (idx > 0 && (idx + 1) % props.columns === 0) {
								vm.showRightBorder = false;
							}
							if (idx >= props.columns) {
								vm.showTopBorder = true;
							}
							vm.marginRight = `${props.gutter}rpx`;
							
							// grid设置间距不再显示边框
							if (props.gutter > 0) {
								vm.showRightBorder = vm.showTopBorder = false;
							}
						});
					}
				})
			})
			
			provide('kui-grid', state);
			
			return {
				rootStyle
			}
		}
	});
</script>

<style>

</style>